<script lang="ts" setup>
import { ref } from 'vue';

const list = ref([{
    orderSn: '32736592',
    avatar: '',
    name: '梁春飞',
    phone: '17727624776',
    activityName: '大D美术周年庆——50元入场券抢占价值1980元八重豪礼+最高4节课！',
    productName: '50元入场券抢占价值1980元八重豪礼+4节课（限新生体验）',
    remark: '备注',
    paymentAmount: "50元",
    applicant: {
        realName: "刘艺成",
        phone: "13512345678"
    },
}])
</script>
<template>
    <umrp-container direction="vertical" :gap="16" height="100%" bg-color="#f2f2f2" padding="16px">
        <umrp-breadcrumb :items="['订单管理', '订单列表']"></umrp-breadcrumb>
        <umrp-card>
            <umrp-grid :cols="4" :col-gap="16">
                <umrp-grid-item>
                    <umrp-statistic :value="7117" title="订单总数"></umrp-statistic>
                </umrp-grid-item>
                <umrp-grid-item>
                    <umrp-statistic :value="803775.66" title="支付总额(元)"></umrp-statistic>
                </umrp-grid-item>
                <umrp-grid-item>
                    <umrp-statistic :value="803775.66" title="佣金(元)"></umrp-statistic>
                </umrp-grid-item>
                <umrp-grid-item>
                    <umrp-statistic :value="803775.66" title="实收总额(元)"></umrp-statistic>
                </umrp-grid-item>
            </umrp-grid>
        </umrp-card>
        <umrp-search-card>
            <umrp-row :gutter="16" style="margin-bottom: 16px;">
                <umrp-col :span="8">
                    <umrp-form-item label="订单编号">
                        <umrp-input placeholder="请输入订单编号"></umrp-input>
                    </umrp-form-item>
                </umrp-col>
                <umrp-col :span="8">
                    <umrp-form-item label="商品名称">
                        <umrp-input placeholder="请输入商品名称"></umrp-input>
                    </umrp-form-item>
                </umrp-col>
                <umrp-col :span="8">
                    <umrp-form-item label="下单时间">
                        <umrp-datepicker></umrp-datepicker>
                    </umrp-form-item>
                </umrp-col>
            </umrp-row>
            <umrp-row :gutter="16">
                <umrp-col :span="8">
                    <umrp-form-item label="订单状态">
                        <umrp-select>
                            <umrp-option>未付款</umrp-option>
                            <umrp-option>待核销</umrp-option>
                            <umrp-option>退款中</umrp-option>
                            <umrp-option>订单关闭</umrp-option>
                            <umrp-option>订单完成</umrp-option>
                        </umrp-select>
                    </umrp-form-item>
                </umrp-col>
            </umrp-row>
        </umrp-search-card>
        <umrp-card>
            <umrp-table :data="list">
                <template #columns>
                    <umrp-table-column title="订单编号" data-index="orderSn"></umrp-table-column>
                    <umrp-table-column title="微信资料" slot-name="wxinfo"></umrp-table-column>
                    <umrp-table-column title="报名信息" slot-name="applicant"></umrp-table-column>
                    <umrp-table-column title="活动场次" data-index="activityName"></umrp-table-column>
                    <umrp-table-column title="商品名称" data-index="productName"></umrp-table-column>
                    <umrp-table-column title="支付金额" data-index="paymentAmount">
                        <template #cell>
                            <umrp-text>50元</umrp-text>
                        </template>
                    </umrp-table-column>
                    <umrp-table-column title="备注"></umrp-table-column>
                    <umrp-table-column title="操作" slot-name="action"></umrp-table-column>
                </template>
                <template #wxinfo="{ nickName, userId }">
                    <umrp-user-info :nick-name="nickName" :user-id="userId" />
                </template>
                <template #applicant="{ applicant }">
                    <umrp-space direction="vertical" :size="10">
                        <umrp-text>{{ applicant.realName }}</umrp-text>
                        <umrp-text>{{ applicant.phone }}</umrp-text>
                    </umrp-space>
                </template>
                <template #action>
                    <umrp-space :size="10">
                        <umrp-button type="primary" v-link:AdminBluesparkOrderDetail>详情</umrp-button>
                        <umrp-button type="primary">退款</umrp-button>
                    </umrp-space>
                </template>
            </umrp-table>
        </umrp-card>
    </umrp-container>
</template>